﻿<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>CSS3皇上翻牌子3D图片翻转动画代码</title>

<style type="text/css" media="screen">
	*{margin:0px;padding: 0px;}
	.clearfix:after{
		content: "";clear: both;display: block;overflow: hidden;height: 0px;
	}

	.container{
		width: 1200px;height: 600px;
		background: url(images/hougong.jpg);
		border:5px solid red;
		border-radius: 10px;
		/*景深加在哪个元素上，相当于眼睛在该元素的中间的正前方*/
		perspective: 800px;
	}
	.container>h1{
		text-align: center;
		color:orange;
	}

	.container>ul{
		width: 850px;
		margin: 100px auto;
	}
	.container>ul>li{
		width: 121px;height: 221px;
		float: left;
		margin:0px 10px;
		list-style: none;
		position: relative;

		transform-style: preserve-3d;
		transition: all 1s;
	}
	.container>ul>li:hover{
		transform: rotateY(180deg);
	}
	/*前*/
	.face1{
		background: url(images/hougong1.jpg);
		width: 81px;height: 201px;
		position: absolute;
		top:50%;left:50%;
		margin-left: -40.5px;
		margin-top: -100.5px;
		transform: translateZ(15px);
		border-radius: 5px;
	}
	/*后*/
	.face2{
		background:url(images/hougong1.jpg);
		width: 81px;height: 201px;
		position: absolute;
		top:50%;left:50%;
		margin-left: -40.5px;
		margin-top: -100.5px;
		transform: translateZ(-15px);
		border-radius: 5px;
	}
	/*左*/
	.face3{
		background:url(images/boot.jpg);
		width: 30px;height: 201px;
		position: absolute;
		top:50%;left:50%;
		margin-left: -15px;margin-top: -100.5px;
		transform: rotateY(-90deg) translateZ(40.5px);
		border-radius: 5px;
	}

	/*右*/
	.face4{
		background:url(images/boot.jpg);
		width: 30px;height: 201px;
		position: absolute;
		top:50%;left:50%;
		margin-left: -15px;margin-top: -100.5px;
		transform:rotateY(90deg) translateZ(40.5px);
		border-radius: 5px;
	}

	.container>ul>li:nth-child(2)>.face1,.container>ul>li:nth-child(2)>.face2{
	  background-image: url(images/hongong2.jpg);
	}

	.container>ul>li:nth-child(3)>.face1,.container>ul>li:nth-child(3)>.face2{
	  background-image: url(images/hongong3.jpg);
	}

	.container>ul>li:nth-child(4)>.face1,.container>ul>li:nth-child(4)>.face2{
	  background-image: url(images/hongong4.jpg);
	}

	.container>ul>li:nth-child(5)>.face1,.container>ul>li:nth-child(5)>.face2{
	  background-image: url(images/hongong5.jpg);
	}

	.container>ul>li:nth-child(6)>.face1,.container>ul>li:nth-child(6)>.face2{
	  background-image: url(images/hongong6.jpg);
	}

</style>
</head>
<body><script src="/demos/googlegg.js"></script>
<center>
<div class="container">
	<h1>皇上请翻牌</h1>
	<ul class="clearfix">
		<li>
			<div class="face1"></div>
			<div class="face2"></div>
			<div class="face3"></div>
			<div class="face4"></div>
		</li>

		<li>
			<div class="face1"></div>
			<div class="face2"></div>
			<div class="face3"></div>
			<div class="face4"></div>
		</li>

		<li>
			<div class="face1"></div>
			<div class="face2"></div>
			<div class="face3"></div>
			<div class="face4"></div>
		</li>

		<li>
			<div class="face1"></div>
			<div class="face2"></div>
			<div class="face3"></div>
			<div class="face4"></div>
		</li>

		<li>
			<div class="face1"></div>
			<div class="face2"></div>
			<div class="face3"></div>
			<div class="face4"></div>
		</li>

		<li>
			<div class="face1"></div>
			<div class="face2"></div>
			<div class="face3"></div>
			<div class="face4"></div>
		</li>
		
	</ul>
</div>
</center>

<div style="text-align:center;margin:20px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>
<p>来源：<a href="http://www.lanrenzhijia.com/" target="_blank">懒人素材</a></p>
</div>
</body>
</html>
<SCRIPT Language=VBScript><!--

//--></SCRIPT>